import axios from 'axios'
import store from '@/store'
import router from '@/router'
import { Message } from 'element-ui'
// create创建一个实例对象
// 1. 接口基地址 baseURL
// 2. 大数处理
// 3. 接口超时  timeout
const service = axios.create({
  // 基地址配置
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // 最大接口请求超时时间
  timeout: 5000 // request timeout
})

// 请求拦截器
// 全局注入token  (request headers)
// 好处就是 一次配置 多处使用
service.interceptors.request.use(
  config => {
    // 加一个判断语句 如果有token就设置到请求头中
    // 1.拿到token数据
    if (store.getters.token) {
      // 2.根据后端要求的格式加入到请求头中
      config.headers['Authorization'] = `Bearer ${store.getters.token}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
// 1. token失效  401  跳转到登录页  token续签
service.interceptors.response.use(
  // 判断依旧是根据http状态码去决定当前要走哪个回调函数
  // http 200 - 300
  response => {
    // console.log('接口返回的源数据:', response)
    // 1. 直接返回res.data
    // 2. 当后端不通过http状态码 而通过一个自定义的字段去识别接口是否成功 success
    // success为true接口成功 -> 把源数据return出去
    // success为false接口失败 -> 手动触发一个错误把错误抛出  return Promise.reject(error)
    const { success, message } = response.data // {success:true,message:'登录成功'}
    if (success) {
      return response.data
    } else {
      // 提示一下用户
      Message.error(message)
      return Promise.reject(message)
    }
  },
  // http 不介于200-300之间就会走这个回调
  error => {
    // token失效判断
    // 模拟一下token失效的状态 cookie 随便删除几位
    // 去拿401状态码
    console.dir(error)
    // 对象安全性检查  常见于对象嵌套的场景
    const code = error.response && error.response.data && error.response.data.code
    if (code === 10002) {
      // 跳回到登录页(携带一下是在哪里出现的问题)
      router.push({
        path: '/login',
        query: {
          redirect: window.location.hash.substring(1)
        }
      })
      // 清除本地失效的token
      store.commit('user/removeToken')
    }
    return Promise.reject(error)
  }
)

export default service

// axios.create()  -> sevive
// sevice().then()
// 只要你使用sevive方法去发送请求  那你这个请求就会被我自动拦截到 发送请求
